<template>
  <a-card style="margin-top: 24px" :bordered="false">
    <template>
      <div class="ant-pro-page-header-search">
        <div class="tabTitle">
          词组列表
        </div>
        <a-input-search placeholder="请输入" style="width: 40%; max-width: 300px" @search="onSearch" />
      </div>
      <router-view />
    </template>
    <div class="operate">
      <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
    </div>

    <a-list :pagination="{ showSizeChanger: true, showQuickJumper: true, pageSize: 10, total: 50 }">
      <a-list-item :key="index" v-for="(item, index) in data">
        <div class="taskDetail">
          {{ item.wordInfo }}
        </div>
        <div slot="actions">
          <a @click="look(item)">查看</a>
        </div>
        <div slot="actions">
          <a @click="edititem(item)">编辑</a>
        </div>
        <div slot="actions">
          <a @click="deleteitem(item)">删除</a>
        </div>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import TaskForm from './modules/TaskForm'
import Info from './components/Info'
import AddWord from './modules/AddWord'
import EditWord from './modules/EditWord'
import InfoWord from './modules/InfoWord'

const data = []
data.push({
  owner: '袁甜甜',
  startAt: '2018-07-26 22:44',
  wordInfo: '我家有6口人：爷爷、奶奶、爸爸、妈妈、弟弟和我。',
  progress: {
    value: 90
  }
})
data.push({
  owner: '乌力杰',
  startAt: '2018-07-26 22:44',
  wordInfo: '你现在有空吗？我想问你一个问题。',
  progress: {
    value: 54
  }
})
data.push({
  owner: '朱宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '明天的会议很重要，请你安排好时间，准时到场。',
  progress: {
    value: 66
  }
})
data.push({
  owner: '王建源',
  startAt: '2018-07-26 22:44',
  wordInfo: '目前看来不算严重，但是尽快治疗，不能拖延，平时饮食清淡，多休息，不要抽烟喝酒。',
  progress: {
    value: 30
  }
})
data.push({
  owner: '吴慎宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '我有许多朋友，其中既有健听人，也有聋人。',
  progress: {
    // status: 'exception',
    value: 100
  }
})
data.push({
  owner: '袁甜甜',
  startAt: '2018-07-26 22:44',
  wordInfo: '一食堂的饭菜好吃，但是比较贵；二食堂比较便宜，但是有点远。',
  progress: {
    value: 90
  }
})
data.push({
  owner: '乌力杰',
  startAt: '2018-07-26 22:44',
  wordInfo: '我最近失眠，整晚翻来覆去睡不着，请问应该挂哪个科的号？',
  progress: {
    value: 54
  }
})
data.push({
  owner: '朱宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '长江和黄河都是我们中国的母亲河。',
  progress: {
    value: 66
  }
})
data.push({
  owner: '王建源',
  startAt: '2018-07-26 22:44',
  wordInfo: '我不喜欢去看牙医，无论是补牙还是拔牙我都很害怕。',
  progress: {
    value: 30
  }
})
data.push({
  owner: '吴慎宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '现在开始上课，请大家不要再打手语聊天了，注意看我讲课。',
  progress: {
    // status: 'exception',
    value: 100
  }
})
export default {
  name: 'WordsManage',
  components: {
    TaskForm,
    Info,
    AddWord,
    EditWord,
    InfoWord
  },
  data () {
    return {
      data,
      status: 'all'
    }
  },
  methods: {
    add () {
      this.$dialog(
        AddWord,
        // component props
        {
          record: {},
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '新增',
          width: 700,
          centered: true,
          maskClosable: false
        }
      )
    },
     look () {
      this.$dialog(InfoWord,
        // component props
        {
          record: {},
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '新增',
          width: 700,
          centered: true,
          maskClosable: false
        })
    },
    edititem () {
      this.$dialog(
        EditWord,
        // component props
        {
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '操作',
          width: 700,
          centered: true,
          maskClosable: false
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  .tabTitle {
    display: flex;
    // padding-left: 2%;
    font-size: 16px;
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20%;
  }
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.taskDetail {
  width: 60%;
  display: flex;
  align-items: center;
}
// .wordInfo {
// 注意文本换行的后续处理
// overflow: hidden;
//  display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 3;
// height: 10px;
// }
</style>
